<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Circle Custom Angle</title>

    
    <link href="../assets/styles.css" rel="stylesheet" />

    <style>
        #chart {
            max-width: 650px;
            margin: 35px auto;
        }

        .apexcharts-legend text {
            font-weight: 900;
        }
    </style>
</head>

<body>
    <div id="chart">

    </div>

    
    <script src="../../dist/apexcharts.js"></script>

    <script>
        var options = {
            chart: {
                height: 380,
                width: 400,
                type: 'radialBar',
            },
            plotOptions: {
                radialBar: {
                    offsetY: -30,
                    startAngle: 0,
                    endAngle: 270,
                    hollow: {
                        margin: 5,
                        size: '30%',
                        background: 'transparent',
                        image: undefined,
                    },
                    dataLabels: {
                        name: {
                            show: false,
                            
                        },
                        value: {
                            show: false,
                        }
                    }
                }
            },
            colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
            series: [76,67,61,90],
            labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
            legend: {
                show: true,
                floating: true,
                fontSize: '16px',
                position: 'left',
                verticalAlign: 'top',
                textAnchor: 'end',
                labels: {
                    useSeriesColors: true,
                },
                markers: {
                    size: 0
                },
                formatter: function(seriesName, opts) {
                    return seriesName + ":  " + opts.globals.series[opts.seriesIndex]
                },
                itemMargin: {
                    vertical: 8,
                },
                containerMargin: {
                    left: 180,
                    top: 8
                }
            }
        }

       var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );
        
        chart.render();
    </script>
</body>

</html>